<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CCF预报名系统|报名情况</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="./plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="./plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="./dist/css/adminlte.min.css">

    <script src="./js/axios-0.18.0.js"></script>

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button type="button" class="btn btn-info" onclick="exitRegister()">退出当前登录</button>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="./dist/img/AdminLTELogo.png" alt="CCF预报名系统" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">CCF预报名系统</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/teacherInfo.jsp" class="nav-link">
                            <i class="nav-icon fas fa-eraser"></i>
                            <p>我的信息</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/teacherChangeInfo.jsp" class="nav-link">
                            <i class="nav-icon fas fa-exclamation"></i>
                            <p>修改信息</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/application.jsp" class="nav-link">
                            <i class="nav-icon fas fa-exclamation"></i>
                            <p>报名情况</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/uploading.jsp" class="nav-link">
                            <i class="nav-icon fas fa-exclamation"></i>
                            <p>上传名单</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/CCF_Pre_Registration_System/check.jsp" class="nav-link">
                            <i class="nav-icon fas fa-exclamation"></i>
                            <p>审核资格</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <!-- 柱状图 -->
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="far fa-chart-bar"></i>
                                    柱状图
                                </h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="bar-chart" style="height: 300px;"></div>
                            </div>
                            <!-- /.card-body-->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="float-right d-none d-sm-block">
            <b>Version</b> 1.0.0
        </div>
        <strong>Copyright &copy; 2022 <a href="#">软件项目管理第六小组</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./dist/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="./plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="./plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="./plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./dist/js/demo.js"></script>
<script src="./js/vue.js"></script>
<!-- 图标数据 -->
<script>
    new Vue({
        el: "#app",
        mounted() {
            var _this = this;
            axios({
                method: "get",
                url: "/CCF_Pre_Registration_System/showForTeacherServlet"
            }).then(function (response) {
                _this.bar_data.data = response.data;
                $.plot('#bar-chart', [_this.bar_data], {
                    grid: {
                        borderWidth: 20,
                        borderColor: '#fefefe',
                        tickColor: '#f3f3f3'
                    },
                    series: {
                        bars: {
                            show: true, barWidth: 0.5, align: 'center',
                        },
                    },
                    colors: ['#3c8dbc'],
                    xaxis: {
                        ticks: [[1, '免费报名人数'], [2, '自费报名人数']]
                    }
                })
            })
        },
        data() {
            return {
                bar_data: {
                    data: [[1, 100], [2, 108]],
                    bars: {show: true}
                }
            }
        }
    })

    /*
     * Custom Label formatter
     * ----------------------
     */
    function labelFormatter(label, series) {
        return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
            + label
            + '<br>'
            + Math.round(series.percent) + '%</div>'
    }

    function exitRegister() {
        axios({
            method: "post",
            url: "/CCF_Pre_Registration_System/systemControl/exitCurrentLoginUser"
        }).then(function (resp) {
            if (resp.data === "success") {
                window.location.href = "index.jsp";
            } else {
                alert("请重试");
            }
        })
    }
</script>
</body>
</html>